<template>
  <div class="progress-page">
    <div class="progress-title">进度列表管理</div>
    <div class="search-bar">
      <el-input v-model="searchForm.studentId" placeholder="输入学号" class="search-input" clearable />
      <el-input v-model="searchForm.studentName" placeholder="输入姓名" class="search-input" clearable />
      <el-input v-model="searchForm.className" placeholder="输入班级" class="search-input" clearable />
      <el-input v-model="searchForm.major" placeholder="输入专业" class="search-input" clearable />
      <el-input v-model="searchForm.email" placeholder="输入邮箱" class="search-input" clearable />
      <el-input v-model="searchForm.phone" placeholder="输入电话" class="search-input" clearable />
      <el-select v-model="searchForm.status" placeholder="输入状态" class="search-input" clearable>
        <el-option label="开题报告已提交" value="开题报告已提交" />
        <el-option label="论文撰写中" value="论文撰写中" />
        <el-option label="已完成答辩" value="已完成答辩" />
      </el-select>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
    <el-table :data="filteredData" style="width: 100%" border>
      <el-table-column prop="studentId" label="学号" width="120" />
      <el-table-column prop="studentName" label="姓名" width="100" />
      <el-table-column prop="className" label="班级" width="100" />
      <el-table-column prop="major" label="专业" width="120" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="status" label="状态" width="100" />
      <el-table-column prop="topicTitle" label="已选课题" width="200" />
      <el-table-column prop="teacher" label="指导教师" width="120" />
      <el-table-column prop="progress" label="当前进度" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.progressType">{{ scope.row.progress }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="lastUpdate" label="最后更新时间" width="150" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button type="primary" link size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const searchForm = ref({
  studentId: '',
  studentName: '',
  className: '',
  major: '',
  email: '',
  phone: '',
  status: ''
})
const tableData = ref([
  { studentId: '20230001', studentName: '李明', className: '计科1班', major: '计算机科学与技术', email: 'liming@example.com', phone: '13800000001', status: '正常', topicTitle: '图书商城', teacher: '20080040张三三', progress: '开题报告已提交', progressType: 'success', lastUpdate: '2024-05-10 09:30' },
  { studentId: '20230002', studentName: '王芳', className: '计科2班', major: '软件工程', email: 'wangfang@example.com', phone: '13800000002', status: '正常', topicTitle: '学生管理系统', teacher: '20080040张三三', progress: '论文撰写中', progressType: 'warning', lastUpdate: '2024-05-09 15:20' },
  { studentId: '20230003', studentName: '张伟', className: '信安1班', major: '信息安全', email: 'zhangwei@example.com', phone: '13800000003', status: '休学', topicTitle: '基于java的鲜花商城系统的设计与实现', teacher: '20080040张三三', progress: '已完成答辩', progressType: 'info', lastUpdate: '2024-05-08 11:10' }
])
const filteredData = computed(() => {
  return tableData.value.filter(row => {
    return (!searchForm.value.studentId || row.studentId.includes(searchForm.value.studentId)) &&
      (!searchForm.value.studentName || row.studentName.includes(searchForm.value.studentName)) &&
      (!searchForm.value.className || row.className.includes(searchForm.value.className)) &&
      (!searchForm.value.major || row.major.includes(searchForm.value.major)) &&
      (!searchForm.value.email || row.email.includes(searchForm.value.email)) &&
      (!searchForm.value.phone || row.phone.includes(searchForm.value.phone)) &&
      (!searchForm.value.status || row.progress === searchForm.value.status)
  })
})
function handleSearch() {}
function handleReset() {
  searchForm.value = { studentId: '', studentName: '', className: '', major: '', email: '', phone: '', status: '' }
}
</script>

<style scoped>
.progress-page {
  max-width: 1200px;
  margin: 40px auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 32px 32px 24px 32px;
}
.progress-title {
  font-size: 26px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 32px;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: nowrap;
  gap: 8px;
}
.search-input {
  width: 120px;
  min-width: 0;
}
</style>